<template>
    <div class="c-ticket__search">
        <Row class="margin-bottom-10" :gutter="30" type="flex">
            <i-col span="6" class="c-ticket__row">
                <span class="c-ticket__label">所在城市</span>
                <div class="c-ticket__item">
                    <Select
                        v-model="param.city"
                        clearable
                        filterable
                        remote
                        :remote-method="handleFetchCities"
                        placeholder="输入搜索城市"
                        class="width-100p">
                        <Option v-for="city in cities"  :value="city.region_code" :key="city.id">
                            {{city.name}}
                        </Option>
                    </Select>
                </div>
            </i-col>
            <i-col span="8" class="c-ticket__row">
                <span class="c-ticket__label c-ticket__label--width">预约上门时间</span>
                <div class="c-ticket__item">
                    <DatePicker class="width-100p" type="datetimerange" format="yyyy-MM-dd" v-model="param.appointment_time" ></DatePicker>
                </div>
            </i-col>
            <i-col span="8" class="c-ticket__row">
                <span class="c-ticket__label">创建时间</span>
                <div class="c-ticket__item">
                    <DatePicker class="width-100p" type="datetimerange" format="yyyy-MM-dd" v-model="param.time" ></DatePicker>
                </div>
            </i-col>
        </Row>

        <Row class="margin-bottom-10" :gutter="30" type="flex">
            <i-col span="6" class="c-ticket__row">
                <span class="c-ticket__label">工单状态</span>
                <div class="c-ticket__item">
                    <Select v-model="param.state" clearable class="width-100p">
                        <Option
                            v-for="(value, key) in states"
                            :value="key"
                            :key="key">{{value}}</Option>
                    </Select>
                </div>
            </i-col>
            <i-col span="8" class="c-ticket__row" v-if="type === 1">
                <span class="c-ticket__label">设备类型</span>
                <div class="c-ticket__item">
                    <Select
                        clearable
                        class="width-100p"
                        v-model="param.device_type">
                        <Option
                            v-for="(device,index) in deviceType"
                            :key="index"
                            :value="device.id">
                            {{device.name}}
                        </Option>
                    </Select>
                </div>
            </i-col>
            <i-col span="8" class="c-ticket__row" v-else>
                <span class="c-ticket__label">工单紧急度</span>
                <div class="c-ticket__item">
                    <Select
                        clearable
                        class="width-100p"
                        v-model="param.respond_hour">
                        <Option
                            v-for="(option,index) in respondHours"
                            :key="index"
                            :value="option.id">
                            {{option.name}}
                        </Option>
                    </Select>
                </div>
            </i-col>
            <i-col span="8" class="c-ticket__row">
                <i-input v-model="param.keyword" @keydown.enter.native="handleSearch">
                    <Select v-model="param.key" slot="prepend" style="width: 100px">
                        <Option
                            v-for="(option,index) in searchKeys"
                            :key="index"
                            :value="option.value">
                            {{option.label}}
                        </Option>
                    </Select>
                </i-input>
            </i-col>
            <i-button @click="handleSearch" type="primary">搜索</i-button>
        </Row>

    </div>
</template>

<script>
    import debounce from 'lodash/debounce'
import { http, api } from '@/libs/http'
import util from '@/libs/util'
import { TicketInstallState, TicketRepairState } from '@/libs/const'

export default {
      name: 'ticket-param-selector',
      props: {
        model: {
          required: true
        },
        type: Number
      },
      computed: {
        states () {
          return this.type === 1 ? TicketInstallState : TicketRepairState
        }
      },
      watch: {
        param: {
          deep: true,
          handler () {
            const {
              key, keyword, time, appointment_time, ...rest
            } = this.param
            const data = { ...rest }

            if (appointment_time.length > 0) {
              data.appointment_start_time = util.startOfDay(appointment_time[0])
              data.appointment_end_time = util.endOfDay(appointment_time[1])
            }
            if (time.length > 0) {
              data.start_time = util.startOfDay(time[0])
              data.end_time = util.endOfDay(time[1])
            }
            if (key && keyword) data[key] = keyword
            this.$emit('update:model', util.cleanObj(data))
          }
        }
      },
      data () {
        return {
          TicketInstallState,
          TicketRepairState,
          loadingClients: false,
          cities: [],
          clients: [],
          implementers: [],
          searchKeys: [
            { label: '工单编号', value: 'sn' },
            { label: '房源编号', value: 'home_name' },
            { label: '房源地址', value: 'address' },
            { label: '小区名称', value: 'block' },
            { label: '联系人', value: 'name' },
            { label: '联系电话', value: 'phone' }
          ],
          param: {
            key: 'sn',
            state: '',
            city: '',
            keyword: '',
            device_type: '',
            respond_hour: '',
            appointment_time: [],
            time: []
          },
          deviceType: [
            { id: 2, name: '门锁' },
            { id: 3, name: '电表' },
            { id: 4, name: '无网关门锁' },
            { id: 6, name: '冷水表' },
            { id: 7, name: '热水表' }
          ],
          respondHours: [
            { id: 3, name: '3小时' },
            { id: 24, name: '24小时' }
          ]
        }
      },
      methods: {
        checkInstallInclude (keyword) {
          return this.implementers.length && this.implementers.find(i => keyword.includes(i.telephone))
        },
        handleFetchCities: debounce(function (keyword) {
          if (/^\s+/.test(keyword)) return
          this.fetchCities(keyword)
        }, 300),
        async fetchCities (name) {
          this.cities = await http.req(api.address_cities, null, { name })
        },
        handleSearch: debounce(function () {
          this.search()
        }, 300, { leading: true }),
        search () {
          this.$emit('search')
        }
      }
    }
</script>

<style lang="less" scoped>
    .width-100p{
        width: 100%;
    }
    .c-ticket{
        &__search{
            margin: 20px 0;
            padding: 20px;
            background-color: #fff;
        }
        &__row{
            display: flex;
            align-items: center;
        }

        &__label{
            margin-right: 5px;
        }

        &__item{
            flex: 1;
        }

        &__label--width{
            width: 84px;
        }
    }
</style>